<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  // top: 0;
  // left: 0;
  // bottom: 0;
  // right: 0;
  // height: 1500px;
  padding-bottom: 6.2rem;
  background-color: #f7f8fa;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  .sweips {
    background-color: var(--theme_color);
    width: 100%;
    // height: 20rem;
    img {
      // height: 20rem;
    }
  }

  .bargaining_down {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-top: -7.5rem;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    .imgs {
      position: absolute;
      top: 22px;
      left: 50%;
      transform: translateX(-50%);
      width: 45px;
      height: 45px;
      overflow: hidden;
      border-radius: 22px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .merchant_name {
      margin-top: 80px;
      font-size: 18px;
      font-weight: 600;
      color: #000000;
      text-align: center;
    }
    .text {
      font-size: 1.2rem;
      color: #666;
      text-align: center;
      margin: 12px 0;
      .shu {
        margin: 0 8px;
      }
    }
    .continer {
      display: flex;
      // justify-content: space-around;
      width: 100%;
      margin: 12px 0;
      padding: 12px 20px;
      background-color: var(--theme_color);
      .con_imgs {
        width: 13rem;
        height: 10rem;
        border-radius: 12px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .con_down {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 0 15px;
        .con_tit {
          margin: 5px 0 12px;
          font-size: 16px;
        }
        .num {
          color: #666;
        }
        .scroll_piz {
          display: flex;
          flex-direction: column;
          :nth-child(1) {
            margin: 1rem 0 1rem;
          }
          :nth-child(2) {
            color: #ff4444;
          }
        }
      }
    }
    .times {
      // display: flex;
      // align-items: center;
      text-align: center;
      font-size: 15px;
      color: #666;
      span {
        color: var(--btn_color);
        font-weight: 600;
      }
    }
    .btn_kan {
      margin: 15px 0 25px;
      display: flex;
      justify-content: center;
      div {
        text-align: center;
        padding: 0 6rem;
        height: 4.2rem;
        border-radius: 50px;
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        line-height: 4.2rem;
        background-color: var(--btn_color);
        letter-spacing: 0.2rem;
      }
    }
  }

  .bargaining {
    position: relative;
    width: 100%;
    background-color: #fff;
    margin-top: -7.5rem;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    .imgs {
      position: absolute;
      top: -22px;
      left: 50%;
      transform: translateX(-50%);
      width: 45px;
      height: 45px;
      overflow: hidden;
      border-radius: 22px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      margin: 32px 0 10px;
      font-size: 16px;
      text-align: center;
      span {
        color: var(--theme_color);
      }
    }
    .times {
      // display: flex;
      // align-items: center;
      text-align: center;
      font-size: 15px;
      color: #666;
      span {
        color: var(--btn_color);
        font-weight: 600;
      }
    }
    .continer {
      display: flex;
      // justify-content: space-around;
      width: 100%;
      margin: 12px 0;
      padding: 12px 20px;
      background-color: var(--theme_color);
      .con_imgs {
        width: 13rem;
        height: 10rem;
        border-radius: 12px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .con_down {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 15px;
        .con_tit {
          margin: 5px 0 12px;
          font-size: 16px;
        }
        .num {
          color: #666;
        }
      }
    }
    .knife {
      display: flex;
      justify-content: space-around;
      margin: 5px 0 12px;
      .knife_left {
        display: flex;
        flex-direction: column;
        align-items: center;
        :nth-child(1) {
          margin-bottom: 15px;
          font-size: 15px;
          color: #999999;
        }
        :nth-child(2) {
          font-size: 30px;
          font-weight: 600;
        }
      }
    }
    .bar {
      padding: 0 3rem;
      .scroll_bar {
        margin-bottom: 10px;
        width: 100%;
        height: 18px;
        background-color: #ffe2e2;
        border-radius: 10px;
        overflow: hidden;
        .bar_scr {
          line-height: 18px;
          height: 100%;
          display: block;
          font-family: arial;
          font-size: 12px;
          background-color: #ff4a26;
          color: #fff;
        }
      }
      .scroll_piz {
        display: flex;
        justify-content: space-between;
        :nth-child(1) {
          color: var(--btn_color);
          text-decoration: line-through;
        }
      }
    }
    .btn_kan {
      margin: 15px 25px;
      display: flex;
      justify-content: space-around;
      div {
        text-align: center;
        // width: 26rem;
        // height: 4.2rem;
        border-radius: 50px;
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        line-height: 4.2rem;
        background-color: var(--btn_color);
        letter-spacing: 0.1rem;
      }
      :nth-child(1) {
        padding: 0 0.7rem;
      }
      :nth-child(2) {
        padding: 0 1.2rem;
      }
    }
    .btn_kantwo {
      margin: 15px 0 25px;
      display: flex;
      justify-content: center;
      div {
        text-align: center;
        padding: 0 6rem;
        // width: 26rem;
        height: 4.2rem;
        border-radius: 50px;
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        line-height: 4.2rem;
        background-color: var(--btn_color);
        letter-spacing: 0.2rem;
      }
    }
  }

  .exothecium {
    padding: 10px;
    .exothecium_one {
      width: 100%;
      // height: 9rem;
      background-color: white;
      border-radius: 8px;
      padding: 12px;
      .the_price {
        :nth-child(1) {
          font-size: 1.3rem;
          color: var(--theme_color);
        }
        :nth-child(2) {
          font-size: 2.5rem;
          color: var(--theme_color);
          margin-right: 5px;
        }
        :nth-child(3) {
          text-decoration: line-through;
          color: #999;
        }
      }
      .title {
        font-size: 20px;
        padding: 10px 0 12px;
        font-weight: 600;
      }

      .title_dwon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .dwon_left {
          color: var(--theme_color);
          :nth-child(1) {
            margin-right: 8px;
            color: #595959;
          }
        }
      }
    }

    .exothecium_two {
      width: 100%;
      // height: 9rem;
      margin-top: 12px;
      background-color: white;
      border-radius: 8px;
      padding: 20px 12px;
      .person_up {
        display: flex;
        align-items: center;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 15px;
        line-height: 20px;
      }
      .person_dwon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .seamless-warp {
          height: 100%;
          width: 26rem;
          overflow: hidden;
        }
        .dwon_imgs {
          display: flex;
          align-items: center;
          .imgs {
            width: 30px;
            height: 30px;

            overflow: hidden;
            border-radius: 15px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .activity {
      box-sizing: border-box;
      width: 100%;
      margin-top: 1rem;
      background-color: #fff;
      border-radius: 10px;
      padding: 2rem 1.6rem;
    }
  }

  .share-btn {
    margin-left: 20px;
    align-items: center;
    background-color: #ff4444;
    color: #fff;
    padding: 2px 5px;
    border-radius: 1rem;
    margin-top: -5px;
  }

  .show {
    height: auto;
    background-color: white;
    position: relative;
    .close-icon {
      position: absolute;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    img {
      width: 100%;
    }
    .posterHtml {
      // display: flex;
      #coverImg {
        display: flex;
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
      }
      .imgBox {
        width: 100%;
      }
      .content {
        padding: 1.2rem;
        display: flex;
        height: 14rem;
        justify-content: space-between;
        .desc {
          word-wrap: break-word;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          .line1 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
          }
          .line2 {
            font-size: 2.2rem;
            font-weight: 900;
            color: #111;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp:2; /* 设置行数 */
            // -webkit-box-orient:vertical;
          }
        }
        .qrcode {
        }
      }
      .bottom-box {
        padding-bottom: 2rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
    }
  }

  .imgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba($color: #000000, $alpha: 0.98);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    img {
      width: 100%;
    }
    .tips {
      color: white;
    }
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
    }
  }
  .fix-bottom {
    display: flex;
    overflow: hidden;
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
  }

  .navigation {
    position: fixed;
    box-sizing: border-box;
    top: 13rem;
    right: 1rem;
    z-index: 1;
    // background-color: var(--btn_color);
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 3px;
    .my_tuan {
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      width: 100%;
      margin-bottom: 1rem;
      // height: 3rem;
      padding: 0.5rem 0.5rem;
      // line-height: 3rem;
    }
  }

  .dwon_btn {
    // overflow: hidden;
    .tuan_btn {
      background-color: var(--btn_color);
      border-radius: 8px;
      color: #fff;
      font-size: 1.2rem;
      letter-spacing: 0.5rem;
      border: 0;
    }
    .release_btn1 {
      background-color: var(--btn_color);
      margin-right: 15px;
      border-radius: 8px;
      font-size: 1.2rem;
      letter-spacing: 0.5rem;
      color: #fff;
      border: 0;
    }
  }

  .vanPopup {
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--theme_color);
    .gift_pop {
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: auto;
      background-color: white;
      position: relative;
      padding: 2rem 0;
      background-color: var(--theme_color);
      .close-icon {
        position: fixed;

        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        bottom: 55%;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
    }
  }

  .lottery-alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 27rem;
    text-align: center;
    z-index: 10000;
    border-radius: 1rem;
    background: #fff;
    padding: 2rem;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
      background: var(--btn_color);
    }
    .imgs {
      width: 80px;
      height: 80px;
      margin-top: -55px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    overflow: hidden;
    z-index: 222;
    top: 0;
    left: 0;
  }

  .lottery-alert img {
    display: block;
    margin: 0 auto;
  }

  .lottery-alert h2 {
    font-weight: normal;
    color: #d92b2f;
    font-size: 1.5rem;
    padding-top: 1.5rem;
  }

  .lottery-alert p {
    width: 12rem;
    height: 12rem;
    color: #666;
    font-size: 1.6rem;
    padding-top: 0.5rem;
  }

  .lottery-alert .btnsave {
    margin-top: 3rem;
    border-radius: 3rem;
    box-shadow: none;
    height: 4rem;
    cursor: pointer;
    line-height: 4rem;
    color: #fff;
    margin-top: 1.2rem;
    background: var(--btn_color);
    font-size: 1.4rem;
    padding: 0 8rem;
    margin-top: 2.5rem;
  }
}
</style>
<template>
  <div
    class="activityShow"
    :style="{ '--theme_color': theme_color, '--btn_color': btn_color }"
  >
    <music-play
      v-if="activityItem.music"
      :activityItem="activityItem"
    ></music-play>
    <activyshow-data
      :visitLists="visitLists"
      :activityItem="activityItem"
      :orderList="orderList"
    ></activyshow-data>
    <van-skeleton :row="$store.state.skeletonRow" :loading="loadingSkeleton">
      <div class="sweips">
        <img src="../../../assets/img/1258.png" alt="" />
      </div>

      <div class="bargaining_down" v-if="is_activity == 2 && pid == 1">
        <div class="imgs">
          <img :src="door_header" alt="" />
        </div>
        <div class="merchant_name">{{ activityItem.merchantname }}</div>
        <div class="text">
          <span>{{ activityItem.browse_num || 0 }}人已关注</span>
          <span class="shu">|</span>
          <span>{{ join_num || 0.0 }}人已参与</span>
        </div>
        <div class="continer">
          <div class="con_imgs">
            <img :src="activityItem.cover" alt="" />
          </div>
          <div class="con_down">
            <div class="con_tit">{{ activityItem.title }}</div>
            <div class="num">
              <span
                >{{ val.ungoods_num || val.goods_num }}/{{ val.goods_num }}份
                <span class="share-btn" @click="shareBtn1('1')"
                  ><van-icon name="share-o" /><span class="share"
                    >分享</span
                  ></span
                ></span
              >
            </div>
            <div class="scroll_piz">
              <span>原价￥{{ val.price }}</span>
              <span
                >可砍至底价<i style="font-size: 18px; font-weight: 600"
                  >￥{{ val.floor_price }}</i
                ></span
              >
            </div>
          </div>
        </div>
        <div class="times">
          <span style="color: #666; font-weight: 500">活动剩余 </span>
          <span>{{ DD }}</span> 天 <span>{{ HH }}</span> 时
          <span>{{ MM }}</span> 分 <span>{{ SS }}</span> 秒
        </div>
        <div class="btn_kan" @click="kbtnClick">
          <div>我要参与, 发起砍价</div>
        </div>
      </div>

      <div class="bargaining" v-if="is_activity == 1 || (pid == 2 && fans_id)">
        <div class="imgs" v-if="!fans_id">
          <img :src="userInfo.avatar" alt="" />
        </div>
        <div class="imgs" v-if="fans_id">
          <img :src="avatar" alt="" />
        </div>
        <div class="title">
          <div v-if="fans_id">
            好友 <span>{{ nickname }}</span> 请你帮忙砍一刀
          </div>
          <div v-else>我的砍价</div>
        </div>
        <div class="times">
          <span style="color: #666; font-weight: 500">活动剩余 </span>
          <span>{{ DD }}</span> 天 <span>{{ HH }}</span> 时
          <span>{{ MM }}</span> 分 <span>{{ SS }}</span> 秒
        </div>
        <div class="continer">
          <div class="con_imgs">
            <img :src="activityItem.cover" alt="" />
          </div>
          <div class="con_down">
            <div>
              <div class="con_tit">{{ activityItem.title }}</div>
              <div class="num">
                <span
                  >{{ val.ungoods_num || val.goods_num }}/{{ val.goods_num }}份
                  <span class="share-btn" @click="shareBtn1('1')"
                    ><van-icon name="share-o" /><span class="share"
                      >分享</span
                    ></span
                  ></span
                >
              </div>
            </div>
            <div
              v-if="order_num == 1 && is_order != 2 && !is_shows"
              style="font-size: 16px; color: #fff"
            >
              砍价倒计时 ({{ dayTime }})
            </div>
            <div v-if="is_order == 2" style="font-size: 16px; color: #fff">
              你已购买商品
            </div>
          </div>
        </div>
        <div class="knife" v-if="fans_id">
          <div class="knife_left">
            <span>累计刀数(刀)</span>
            <span>{{ total_nums }}</span>
          </div>
          <div class="knife_left">
            <span>总共已砍金额(元)</span>
            <span>{{ bargained_price }}</span>
          </div>
        </div>
        <div class="knife" v-if="!fans_id">
          <div class="knife_left">
            <span>累计刀数(刀)</span>
            <span>{{ total_nums }}</span>
          </div>
          <div class="knife_left">
            <span>总共已砍金额(元)</span>
            <span>{{ bargained_price }}</span>
          </div>
        </div>
        <div class="bar">
          <div class="scroll_bar">
            <strong class="bar_scr" :style="{ width: percentage }">
              <i style="margin: 12px">{{ percentage }}</i>
            </strong>
          </div>
          <div class="scroll_piz">
            <span>原价￥{{ val.price }}</span>
            <span>底价￥{{ val.floor_price }}</span>
          </div>
        </div>

        <div class="btn_kan" v-if="!fans_id">
          <div @click="tuanClick" v-if="order_num == 1 && is_order != 2">
            {{
              (((val.price - bargained_price) * 100) / 100).toFixed(2) +
              "元(现价支付)"
            }}
          </div>
          <div v-if="order_num == 1 && is_order == 2">
            {{ "支付成功" }}
          </div>
          <div
            @click="shareBtn1"
            v-if="!is_kan && order_num == 1 && is_order != 2"
          >
            邀请好友帮忙
          </div>
          <div @click="onlycutClick" v-if="is_kan && order_num == 1">
            自砍一刀
          </div>
        </div>
        <div class="btn_kantwo" v-if="fans_id">
          <div
            @click="helpClick"
            v-if="fans_id && iskan_status == 2 && is_sfky == 2"
          >
            帮砍一刀
          </div>
          <!-- 帮砍且不允许帮砍 -->
          <div
            @click="wantClick"
            v-if="fans_id && iskan_status == 1 && is_sfky == 1"
          >
            我也要砍价
          </div>
          <!-- 未帮砍且不允许帮砍 -->
          <div
            @click="wantClick"
            v-if="fans_id && iskan_status == 2 && is_sfky == 1"
          >
            我也要砍价
          </div>
          <!-- 帮砍且允许帮砍 -->
          <div
            @click="wantClick"
            v-if="fans_id && iskan_status == 1 && is_sfky == 2"
          >
            我也要砍价
          </div>
        </div>
      </div>

      <div class="exothecium">
        <div class="exothecium_two">
          <div class="person_up">好友帮砍</div>
          <div class="person_dwon">
            <div v-if="mergeList.length > 0">
              <vue-seamless-scroll
                :data="mergeList"
                :class-option="optionSetting"
                class="seamless-warp"
                v-if="mergeList.length >= 7"
              >
                <div class="dwon_imgs">
                  <div class="imgs" v-for="(item, i) in mergeList" :key="i">
                    <img :src="item.avatar" alt="" />
                  </div>
                </div>
              </vue-seamless-scroll>
              <div class="dwon_imgs" v-else>
                <div class="imgs" v-for="(item, i) in mergeList" :key="i">
                  <img :src="item.avatar" alt="" />
                </div>
              </div>
            </div>
            <div class="dwon_imgs">
              <div class="imgs" v-if="mergeList.length == 0">
                <img src="./../../../assets/img/pop.png" alt="" />
              </div>
            </div>
            <div @click="personClick">
              <van-icon name="ellipsis" size="20" />
            </div>
          </div>
        </div>

        <!-- 活动内容 -->
        <active-content :activityItem="activityItem"></active-content>

        <!-- 商家信息 -->
        <infor-mation :activityItem="activityItem"></infor-mation>

        <!-- 创建活动 -->
        <CreateActivities
          v-if="activityItem.act_release == 1"
          @helpPlugChange="helpPlugChange"
        ></CreateActivities>

        <!-- 滚动 -->
        <scroll-data
          v-if="orderList.length != 0"
          :scrollList="orderList"
          :title="'参与活动'"
        ></scroll-data>
        <!-- 广告弹窗 -->
        <PopUp v-if="shutShow" :val="val" @shutDown="shutDown"></PopUp>
        <Footer :config="config"></Footer>
      </div>

      <div class="mask" v-if="showToast"></div>
      <div class="lottery-alert" v-if="showToast">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="saveClick"
          ><van-icon color="white" name="cross"
        /></span>
        <div class="imgs">
          <img src="../../../assets/img/acti.png" alt="" />
        </div>
        <h2>
          你帮
          <span v-if="fans_id">{{ nickname }}砍掉了{{ barPrice }}元</span>
          <span v-else>{{ "自己" }} 砍掉了{{ barPrice }}元</span>
        </h2>
        <p><img src="../../../assets/img/mon.png" alt="" /></p>
        <div></div>
        <template>
          <div class="btnsave" @click="saveClick">知道了</div>
        </template>
      </div>

      <div class="fix-bottom padding-lr dwon_btn">
        <!-- <van-button
          size="normal"
          v-if="activityItem.act_release == 1"
          @click="releaseClick"
          class="release_btn1"
          block
          >创建活动</van-button
        > -->
        <!-- <van-button
          size="normal"
          block
          @click="shareBtn"
          class="tuan_btn"
          v-if="order_num == 1"
        >
          {{ activityItem.status == 1 ? val.active_title : "活动结束" }}
        </van-button>
        <van-button
          size="normal"
          block
          @click="tuanClick"
          class="tuan_btn"
          v-else
        >
          {{ activityItem.status == 1 ? "立即购买" : "活动结束" }}
        </van-button> -->
      </div>

      <div class="navigation">
        <div class="my_tuan" @click="orderGroup" v-if="orderList.length != 0">
          订单
        </div>
        <!-- <div class="my_tuan" @click="giftClick">奖品</div> -->
      </div>
    </van-skeleton>
    <!-- 分享蒙版 -->
    <share-mask
      v-if="cancelShow"
      @shareChange="shareChange"
      @cancelChange="cancelChange"
    ></share-mask>

    <!-- 分享 -->
    <van-popup v-model="showPop" position="bottom" round>
      <div class="show">
        <span
          class="close-icon"
          :style="{ backgroundColor: theme_color }"
          @click="showPop = false"
          ><van-icon color="white" name="cross"
        /></span>
        <!-- 海报html元素 -->
        <div id="posterHtml" class="posterHtml">
          <img id="coverImg" :src="copyimg" />
          <div class="content">
            <div class="desc">
              <div class="line1">
                <span>快来参加</span>
                <van-icon class="margL-m" name="fire" :color="theme_color" />
              </div>
              <div class="line2">{{ activityItem.title }}</div>
            </div>
            <!-- 二维码 -->
            <canvas class="qrcode" id="qrCode-canvas"></canvas>
          </div>
          <div class="margT-l bottom-box">
            <div class="fs-16 t-bold">{{ activityItem.merchantname }}</div>
            <div class="color-m margT-m" style="display:flex; center;">
              <span></span>
              <span>本次活动 {{ activityItem.end_time }} 结束</span>
              <span></span>
            </div>
          </div>
        </div>
        <div class="padding-lr">
          <van-button
            :color="theme_color"
            block
            @click="createPoster"
            :loading="createLoading"
            >生成海报</van-button
          >
        </div>
      </div>
    </van-popup>
    <div class="imgBox" v-if="showImgPop">
      <img :src="createImg" />
      <div class="tips margT-m fs-16">Tips:长按以上海报即可保存或转发</div>
      <span
        class="close-icon"
        :style="{ backgroundColor: theme_color }"
        @click="showImgPop = false"
        ><van-icon color="white" name="cross"
      /></span>
    </div>
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Image as VanImage,
  AddressEdit,
  AddressList,
  Skeleton,
} from "vant";
import QRCode from "qrcode";
import html2canvas from "html2canvas";
import InforMation from "@/components/InforMation";
import Header from "@/components/headerlotto";
import MusicPlay from "@/components/MusicPlay";
import ActiveContent from "@/components/ActiveContent";
// import BrowseNumber from "@/components/BrowseNumber";
// import CommissionList from "@/components/CommissionList";
import ActivyshowData from "@/components/ActivyshowData.vue";
import ScrollData from "@/components/ScrollData";
import Footer from "@/components/Footer";
import PrizeDetail from "@/components/PrizeDetail";
import InforHlep from "@/components/InforHlep";
import InforPrize from "@/components/InforPrize";
import ShareMask from "@/components/ShareMask";
import PopUp from "@/components/PopUp";
import CreateActivities from "@/components/CreateActivities";
// import { areaList } from "@vant/area-data";
// import func from 'vue-editor-bridge';
import utils from "@/assets/js/utils.js";
export default {
  name: "groupBuyingactivityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [VanImage.name]: VanImage,
    [AddressEdit.name]: AddressEdit,
    [AddressList.name]: AddressList,
    [Skeleton.name]: Skeleton,
    Header,
    MusicPlay,
    ActiveContent,
    // BrowseNumber,
    InforMation,
    // CommissionList,
    ActivyshowData,
    Footer,
    ScrollData,
    PrizeDetail,
    InforHlep,
    InforPrize,
    ShareMask,
    PopUp,
    CreateActivities,
  },
  data() {
    return {
      solitaireList: [1, 2, 2, 2, 2],
      loadingSkeleton: true,
      config: "",
      p_openid: "",
      is_apply: false,
      showPop: false,
      showImgPop: false,
      createLoading: false,
      id: "",
      createImg: "",
      config: "",
      activityItem: {},
      val: {},
      endtime: "",
      // tuanendtime: "",
      flag: false,
      openid: localStorage.getItem("COPENID"),
      DD: "00",
      HH: "00",
      MM: "00",
      SS: "00",
      introduce: [],
      create_form: {},
      offeredList: [],
      orderItem: {},
      is_apply: false,
      temp: null, //倒计时初始
      activity_id: null,
      theme_color: "",
      btn_color: "",
      is_refund: false,
      is_withdrawal: false,
      copyimg: "",
      is_edit: 0,
      staff_id: null,
      orderList: [],
      prizes: [],
      visitList: [],
      // 没过滤数据
      visitLists: [],
      helpList: [],
      oneself_num: null,
      order_num: null,
      is_order: null,
      prizeLists: [],
      prize_status: null,
      fans_id: null,
      is_activity: null,
      showToast: false,
      // 已砍过
      is_kan: false,
      barPrice: null,
      userInfo: {},
      fansItema: {},
      percentage: null,
      fans_idone: null,
      nickname: "",
      total_nums: null,
      bargained_price: null,
      door_header: "",
      mergeList: [],
      avatar: "",
      cancelShow: false,
      selfEndTime: "",
      dayTime: "",
      p_status: null,
      btn_sum: "",
      shutShow: false,
      is_fanshelp: null,
      zf_order: "",
      pid: 1,
      is_shows: false,
      iskan_status: null,
      is_sfky: null,
    };
  },
  created() {
    const _this = this;
    _this.activity_id = Number(_this.$route.params.id);
    _this.staff_id = _this.$route.query.staff_id;
    _this.fans_id = _this.$route.query.fans_id;
    _this.p_openid = _this.$route.query.p_openid;
    _this.nickname = _this.$route.query.nickname;
    _this.avatar = _this.$route.query.avatar;
    if (_this.$route.query.pid) {
      _this.pid = _this.$route.query.pid;
    }
    // let obj = _this.$store.state.objParams
    // _this.staff_id = obj.staff_id;
    // _this.p_openid = obj.p_openid;
    // _this.nickname = obj.nickname;
    // _this.fans_id = obj.fans_id
    _this.userInfo =
      JSON.parse(localStorage.getItem("USERINFO")) ||
      JSON.parse(localStorage.getItem("userInfo"));
  },
  destroyed() {
    //需要销毁
    clearInterval(this.temp);
    console.log(this.temp, "销毁");
  },
  computed: {
    optionSetting() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    const _this = this;
    let time = setInterval(() => {
      if (_this.flag == true) {
        clearInterval(time);
      }
      _this.timeDown();
    }, 1000);
    _this.staff_id = _this.$route.query.staff_id;
    _this.activityItem = _this.$store.state.activityItem;
    // if(_this.activityItem){
    //   _this.shareInit(_this.activityItem)
    // }
    if (process.env.NODE_ENV == "production") {
      _this.openid = localStorage.getItem("COPENID");
      // alert("_this.openid:"+_this.openid)
    } else {
      _this.openid = _this.$store.state.openid;
    }

    // _this.getWeixinConfig()
    if (!_this.openid || _this.openid == "undefined") {
      _this.getWeixinConfig();
    } else {
      _this.getActivityItem(); // 获取活动数据的同时会调用getOrderItem、shareInit函数是、
    }
    // _this.getDomain();
    // 获取用户在后台管理系统中自定义的H5页面所显示的应用名称
    _this.ConfigItem();
  },
  methods: {
    getDomain() {
      const _this = this;
      if (process.env.NODE_ENV == "production") {
        _this.openid = localStorage.getItem("COPENID");
        if (
          _this.$route.query.openid &&
          _this.$route.query.openid != "undefined"
        ) {
          _this.openid = _this.$route.query.openid;
          localStorage.setItem("COPENID", _this.openid);
        }
      } else {
        _this.openid = _this.$store.state.openid;
      }
      let params = {};
      _this.$request.getDomain(params).then((res) => {
        if (res.ret == 200) {
          if (res.data.value.mainUrl && res.data.value.cannonUrl) {
            let domain = {
              mainUrl: res.data.value.mainUrl,
              cannonUrl: res.data.value.cannonUrl,
            };
            _this.domain = domain;

            console.log(
              "cannonUrl:" + location.href.indexOf(_this.domain.cannonUrl)
            );
            if (location.href.indexOf(_this.domain.cannonUrl) > -1) {
              _this.openid = _this.$route.query.openid;
              localStorage.setItem("COPENID", _this.openid);
              console.log("cannonUrl_this.openid", _this.openid);
            }
            //openid没拿到的时候
            if (!_this.openid || _this.openid == "undefined") {
              //当前为炮灰域名的时候
              if (location.href.indexOf(_this.domain.cannonUrl) > -1) {
                //跳转到主域名
                window.location.href = `${_this.domain.mainUrl}${
                  location.href.indexOf("addons") > -1
                    ? "/addons/youmi_activitys/public"
                    : ""
                }/plugin/index.html#/caseShow/bargaining/activityShow/${Number(
                  _this.$route.params.id
                )}?fans_id=${_this.$route.query.fans_id}&staff_id=${
                  _this.$route.query.staff_id
                }&openid=${_this.openid}&p_openid=${
                  _this.$route.query.p_openid
                }&nickname=${_this.$route.query.nickname}&avatar=${
                  _this.$route.query.avatar
                }`;
                return;
              }
            } else {
              _this.toCannonUrl();
            }
          }
          console.log("_this.openid:" + _this.openid);
          if (!_this.openid || _this.openid == "undefined") {
            _this.getWeixinConfig(); // 通过微信授权 获取 openID
          } else {
            _this.getActivityItem(); // 获取活动数据的同时会调用getOrderItem、shareInit函数是、
          }
        }
      });
    },
    // ?fans_id=${_this.$route.query.fans_id}&staff_id=${_this.$route.query.staff_id}&p_openid=${_this.$route.query.p_openid}&nickname=${_this.$route.query.nickname}&avatar=${_this.$route.query.avatar}
    toCannonUrl() {
      const _this = this;
      if (location.href.indexOf(_this.domain.mainUrl) > -1) {
        //跳转到炮灰域名
        window.location.href = `${_this.domain.cannonUrl}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/bargaining/activityShow/${Number(
          _this.$route.params.id
        )}?fans_id=${_this.$route.query.fans_id}&staff_id=${
          _this.$route.query.staff_id
        }&openid=${_this.openid}&p_openid=${
          _this.$route.query.p_openid
        }&nickname=${_this.$route.query.nickname}&avatar=${
          _this.$route.query.avatar
        }`;
      }
    },
    // 分享按钮
    shareBtn1(sum) {
      // if (this.dayTime == "00:00:00") {
      //   return this.$toast("您当前活动助力时间已到, 无法继续助力,可去兑换奖品");
      // }
      if (sum) {
        this.btn_sum = sum;
      }
      this.cancelShow = true;
    },
    // 取消按钮
    cancelChange() {
      this.cancelShow = false;
    },
    // 生成海报
    shareChange() {
      this.cancelShow = false;
      if (this.btn_sum == 1) {
        this.shareBtn(this.btn_sum);
      } else {
        this.shareBtn();
      }
    },
    // 我也要砍价
    wantClick() {
      console.log(window.location.href);
      let url = window.location.href;
      if (url.indexOf("?") > -1) {
        let strs = url.split("?");
        console.log(strs[0]);
        window.location.href = strs[0];
        window.location.reload();
      }
    },
    // 关闭
    saveClick() {
      this.showToast = false;
      // this.fans_idone = true;
      this.getFansItema();
      if (this.val.is_links) {
        setTimeout(() => {
          this.shutShow = true;
        }, 1000);
      }
    },
    // 关闭弹窗
    shutDown() {
      this.shutShow = false;
    },
    getFansItemss() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
      };
      this.$request.getFansItemss(params).then((res) => {
        if (res.data.ret == 400) {
          // 你的助力次数已到
          this.is_fanshelp = 1;
        } else {
          // 你还要助力次数
          this.is_fanshelp = 2;
        }
      });
    },
    // 帮好友砍价
    helpClick() {
      if (this.is_fanshelp == 1) {
        this.$toast("您在本次活动中助力次数已到限额,无法为好友提供助力");
        this.iskan_status = 1;
        return (this.showToast = false);
      }
      const _this = this;
      const p_openid = _this.$route.query.p_openid;
      console.log(
        _this.val.bargaining_num,
        _this.total_nums,
        "--------_this.total_nums-----------"
      );
      if (_this.val.bargaining_num + 1 == _this.total_nums) {
        _this.$toast("你已达到该活动的砍价次数，不能继续砍价");
        this.iskan_status = 1;
        return (this.showToast = false);
      }
      if (p_openid == _this.openid) {
        _this.$toast("不可为自己砍价");
        this.iskan_status = 1;
        return (this.showToast = false);
      }
      let params = {
        activity_id: Number(_this.$route.params.id),
        pid: _this.fans_id,
        openid: _this.openid,
        p_openid: p_openid,
      };
      if (_this.p_status == 1) {
        this.iskan_status = 1;
        return _this.$toast(
          "您好友可助力时间已到无法助力,您可以去邀请好友为自己助力"
        );
        // _this.showToast = true;
      }
      _this.$request.getReceivingHelps(params).then((res) => {
        if (res.ret == 400) {
          // _this.fans_idone = true;
          _this.iskan_status = 1;
          return (_this.showToast = false);
          // return _this.$toast("已为好友砍过价");
        }
        _this.showToast = true;
        _this.iskan_status = 1;
        _this.total_nums++
        _this.barPrice = Math.floor(res.data.price * 100) / 100;
        setTimeout(() => {
          _this.getFansItema();
        }, 2000);
      });
    },
    // 砍自己一刀
    onlycutClick() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
      };
      this.$request.getFansMyKJ(params).then((res) => {
        this.barPrice = Math.floor(res.data.price * 100) / 100;
        this.showToast = true;
        this.is_kan = false;
        this.total_nums = this.total_nums + 0;
      });
    },
    // 获取是否是发起人
    getFansItema() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
        pid: this.$route.query.fans_id,
      };
      this.$request.getFansItema(params).then((res) => {
        if (res.data.ret == 400) {
          this.order_num = 1;
          this.getdataList(res);
          if (this.bargained_price == "0.0000") {
            this.total_nums = 0;
            this.bargained_price =
              Math.floor(res.data.data.bargained_price * 100) / 100;
            return (this.is_kan = true);
          }
        }
        if (res.data.ret == 300) {
          // 未发起砍价，报过名
          this.order_num = 1;
          this.getdataList(res);
        }
        if (res.data.ret == 200) {
          // 未发起活动, 未报名
          if (!res.data.data.val) {
            this.is_activity = 2;
          } else {
            this.getdataList(res);
            let val = res.data.data.val;
            let params = {
              activity_id: Number(this.$route.params.id), // 活动ID
              val: JSON.stringify(val), // 自定义表单数据num: 1,
              openid: this.openid,
              staff_id: this.staff_id,
              pid: this.fans_id,
            };
            this.getFansItema2();
            // this.$request.getKJorder(params).then((res) => {
            //   this.is_activity = 1;
            //   this.getFansItema2();
            // });
          }
        }
      });
    },
    getFansItema2() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
        pid: this.$route.query.fans_id,
      };
      this.$request.getFansItema(params).then((res) => {
        if (res.data.ret == 400) {
          this.order_num = 1;
          this.getdataList(res);
          if (this.bargained_price == "0.0000") {
            this.total_nums = 0;
            this.bargained_price =
              Math.floor(res.data.data.bargained_price * 100) / 100;
            return (this.is_kan = true);
          }
        }
        if (res.data.ret == 300) {
          this.order_num = 1;
          this.getdataList(res);
        }
        if (res.data.ret == 200) {
          // 未发起活动
          if (!res.data.data.val) {
            this.is_activity = 2;
          } else {
            this.getdataList(res);
            let val = res.data.data.val;
            let params = {
              activity_id: Number(this.$route.params.id), // 活动ID
              val: JSON.stringify(val), // 自定义表单数据num: 1,
              openid: this.openid,
              staff_id: this.staff_id,
              pid: this.fans_id,
            };
          }
        }
      });
    },
    getdataList(res) {
      this.is_activity = 1;
      this.fansItema = res.data.data;
      this.total_nums = this.fansItema.total_nums
      // alert(res.data.data_pa.length)
      if (res.data.data && res.data.data_pa.length > 0) {
        // alert(res.data.data_pa.length)
        this.fansItemaPa = res.data.data_pa;
        this.mergeList = [this.fansItema, ...this.fansItemaPa];
      }
      if (res.data.data && res.data.data_pa.length == 0) {
        this.mergeList = [this.fansItema];
        console.log(this.mergeList, "------------this.mergeList--------");
        if (res.data.data.bargained_price == "0.0000") {
          this.is_kan = true;
          this.total_nums = 0;
        } else {
          this.total_nums = this.fansItema.total_nums + 0;
        }
      }
      this.bargained_price =
        Math.floor(res.data.data.bargained_price * 100) / 100;
      let percent =
        this.fansItema.bargained_price /
        (Number(this.val.price) - Number(this.val.floor_price));
      let str = Number(percent * 100).toFixed(1);
      this.percentage = str += "%";
      console.log(
        res.data.data.bargained_price,
        this.percentage,
        "------------this.percentage"
      );
    },
    // 去报名
    kbtnClick() {
      let objParams = {
        staff_id: this.$route.query.staff_id,
        p_openid: this.$route.query.p_openid,
        nickname: this.$route.query.nickname,
        fans_id: this.$route.query.fans_id,
      };
      this.$store.commit("setObjParams", objParams);
      this.$store.commit("setThemeColor", this.theme_color);
      this.$store.commit("setActivityItem", this.activityItem);
      this.$router.push(
        `/caseShow/bargaining/ApplyForm?activity_id=${this.activity_id}&fans_id=${this.fans_id}`
      );
    },
    getActivityFansItem() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
      };
      this.$request.getActivityFansItems(params).then((res) => {
        this.oneself_num = res.data;
      });
    },
    // 重新获取助力次数
    prizeDates() {
      this.getActivityFansItems();
    },
    // 获取商户
    getMerchantItem(merchant_id) {
      let params = {
        id: merchant_id,
      };
      this.$request.getMerchantItema(params).then((res) => {
        this.door_header = res.data.door_header;
        this.$store.commit("setMerchant", res.data);
      });
    },
    // 判断是否已经领取奖品
    // getPrizeorder() {
    //   let params = {
    //     activity_id: Number(this.$route.params.id),
    //     openid: this.openid,
    //   };
    //   this.$request.getPrizeorder(params).then((res) => {
    //     if (res.data.ret == 400) {
    //       // 已领取
    //       this.prize_status = 1;
    //     } else {
    //       // 未领取
    //       this.prize_status = 2;
    //     }
    //   });
    // },
    // 零元支付查询
    getItemKGZF() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
      };
      this.$request.getItemKGZF(params).then((res) => {
        if (res.data.ret == 400) {
          this.zf_order = 2;
        } else {
          this.zf_order = 1;
        }
        // this.oneself_num = res.data;
        // this.bus.$emit("getNum", this.oneself_num);
      });
    },
    // 获取自己助力次数
    getActivityFansItems() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
      };
      this.$request.getActivityFansItems(params).then((res) => {
        this.oneself_num = res.data;
        this.bus.$emit("getNum", this.oneself_num);
      });
    },
    // 好友助力排行
    getHelpsList() {
      let params = { activity_id: this.activity_id };
      this.$request.helpsList(params).then((res) => {
        let data = [];
        res.data.data.forEach((item) => {
          if (item.count != 0) {
            return data.push(item);
          }
        });
        let compare = function (obj1, obj2) {
          var val1 = parseFloat(obj1.count);
          var val2 = parseFloat(obj2.count);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
        let list = data.sort(compare).reverse().splice(0, 10);
        this.helpList = list;
        console.log(this.helpList, "this.helpList");
      });
    },
    // 接龙人数详情
    personClick() {
      this.$store.commit("setMergeList", this.mergeList);
      this.$router.push(
        `/caseShow/bargaining/OrderDetails?activity_id=${this.activity_id}&theme_color=${this.theme_color}`
      );
    },
    // 跳转我也要发布活动
    helpPlugChange() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html#/case/${this.activityItem.model}/${
        this.activityItem.id
      }?is_edit=${this.is_edit}&case_id=${this.activityItem.case_id}`;
    },

    // 查询浏览记录
    getPageVisit() {
      let params = { activity_id: this.activity_id };
      let list = [];
      this.$request.getPrizeHBTKvisit(params).then((res) => {
        console.log(res.data);
        if (!res.data) return;
        this.visitLists = res.data;
        res.data.forEach((item, x) => {
          if (list.length >= 10) {
            return;
          } else list.push(item);
        });
        this.visitList = list;
      });
    },

    // 佣金排行
    // getPageCommissionRank() {
    //   let params = { activity_id: this.activity_id };
    //   this.$request.getGroupCommissionRank(params).then((res) => {
    //     this.commissionList = res.data.data;
    //   });
    // },

    // 点击我的订单
    orderGroup() {
      this.$store.commit("setActivityItem", this.activityItem);
      this.$store.commit("setThemeColor", this.theme_color);
      this.is_refund = this.val.is_refund;
      this.$router.push(
        `/caseShow/bargaining/GroupOrder?activity_id=${this.activity_id}&is_refund=${this.is_refund}&theme_color=${this.theme_color}`
      );
    },

    // 点击零钱
    wthdrawGroup() {
      console.log(this.activity_id);
      this.$store.commit("setThemeColor", this.theme_color);
      this.is_withdrawal = this.val.is_withdrawal;
      this.$router.push(
        `/caseShow/envelopesTalk/WithdrawDeposit?activity_id=${this.activity_id}&is_withdrawal=${this.is_withdrawal}&theme_color=${this.theme_color}`
      );
    },
    timer(time) {
      //页面多个定时器
      this.temp = setInterval(() => {
        const endTime = new Date(time).getTime();
        this.dayTime = utils.countDownFun(endTime);
      }, 1000);
    },
    getGrouorders() {
      let params = {
        openid: this.openid,
        activity_id: this.activity_id,
        status: "2",
      };
      this.$request.getOrderpages(params).then((res) => {
        if (res.data.order.length == 0) return;
        if (res.data.order.length == 1) {
          this.is_order = 2;
          // this.order_num  = 2
        }
      });
    },

    // getGrouorders() {
    //   let params = {
    //     openid: this.openid,
    //     activity_id: this.activity_id,
    //     status: "2",
    //   };
    //   this.$request.getOrderpages(params).then((res) => {
    //     if (res.data.order.length == 1) {
    //       this.is_order = 2;

    //     }
    //   });
    // },

    getOrderSelorders() {
      let params = {};
      if (this.p_openid) {
        params = {
          activity_id: Number(this.$route.params.id),
          pid: this.$route.query.fans_id,
        };
      } else {
        params = {
          activity_id: Number(this.$route.params.id),
          openid: this.openid,
        };
      }
      this.$request.getOrderSelorders(params).then((res) => {
        if (res.data.ret == 200) {
          this.selfEndTime = res.data.data;
          this.timer(this.selfEndTime);
        } else {
          this.is_shows = true;
        }
      });
    },
    getOrderSelorders1() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.p_openid,
      };
      this.$request.getOrderSelorders(params).then((res) => {
        if (res.data.msg == "超过助力时间无法助力") {
          this.p_status = 1;
          console.log(this.p_status, "this.p_status-----------------");
        }
      });
    },
    getPageOrder() {
      let params = { activity_id: this.activity_id };
      this.$request.getPrizeHBTKorder(params).then((res) => {
        if (!res.data) return;
        this.orderList = res.data;
        console.log(this.orderList, "+++++++++this.orderList++++++++");
      });
    },

    // 点击支付
    tuanClick() {
      console.log(1111111, this.order_num);
      let presentPrice = (
        ((Number(this.val.price) - Number(this.bargained_price)) * 100) /
        100
      ).toFixed(2);
      // if (this.order_num == 1 && this.is_order == 2) {
      //   console.log(1111111, this.order_num);
      //   return this.$toast("你已购买过商品，无法继续支付");
      // }
      console.log(
        this.val.price,
        this.bargained_price,
        presentPrice,
        this.val.price - this.bargained_price
      );
      if (
        this.val.is_floor &&
        Number(presentPrice) != Number(this.val.floor_price)
      ) {
        return this.$toast("只能底价购买，请邀请好友砍价吧");
      } else {
        Dialog.confirm({
          title: `是否确认以${presentPrice}元购买`,
          message: "点击购买后，砍价活动结束",
        })
          .then(() => {
            this.$store.commit("setThemeColor", this.theme_color);
            this.$store.commit("setActivityItem", this.activityItem);
            this.$store.commit("setPresentPrice", presentPrice);
            this.$router.push(
              `/caseShow/bargaining/ApplyFormKJ?activity_id=${this.activity_id}&staff_id=${this.staff_id}`
            );
          })
          .catch(() => {
            // on cancel
          });
      }

      //  this.$router.push('/caseShow/groupBuying/ApplyForm')
      //  this.$router.push('/caseShow/groupBuying/groupDetails')
    },

    // 分享
    // helpTimes() {
    //   const _this = this;
    //   const p_openid = _this.$route.query.p_openid;
    //   if (p_openid) {
    //     let params = {
    //       activity_id: Number(_this.$route.params.id),
    //       openid: _this.openid,
    //       p_openid: p_openid,
    //     };
    //     // console.log(p_openid, "p_openid");
    //     _this.$request.receivingHelp(params).then((res) => {});
    //   }
    // },
    // applyClick() {
    //   this.$router.push(`/caseShow/groupBuying/applyForm`);
    // },
    ConfigItem() {
      const _this = this;
      let params = {};
      _this.$request.ConfigItem(params).then((res) => {
        _this.config = res.data.value;
        console.log("_this.config", _this.config);
      });
    },
    shareInit(activityItem) {
      const _this = this;
      const url = location.href.split("#")[0];
      let params = {
        url: url,
      };
      _this.$request.configJssdk(params).then((res) => {
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, //appid
          timestamp: res.data.timestamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          signature: res.data.signature, // 签名
          jsApiList: [
            "checkJsApi",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 需要使用的JS接口列表
        });
        let link = "";
        if (location.href.indexOf("staff_id") > -1) {
          // link = location.href;
          // if (link.indexOf("?") > -1) {
          //   let strs = url.split("?");
          //   link = `${strs[0]}#/caseShow/${_this.activityItem.model}/activityShow/${_this.activityItem.id}?fans_id=${_this.activityItem.fans_id}&staff_id=${_this.staff_id}&p_openid=${_this.openid}&nickname=${_this.userInfo.nickname}&avatar=${_this.userInfo.avatar}`;
          // }
          let url = location.href;
          if (url.indexOf("?") > -1) {
            let strs = url.split("?");
            console.log(strs[0]);
            link = `${strs[0]}?fans_id=${_this.fans_id}&p_openid=${_this.p_openid}&nickname=${_this.nickname}&avatar=${_this.avatar}`;
          } else {
            link = `${location.href}?fans_id=${_this.activityItem.fans_id}&p_openid=${_this.openid}&nickname=${_this.userInfo.nickname}&avatar=${_this.userInfo.avatar}`;
          }
        } else {
          // link = location.href;
          // if (link.indexOf("?") > -1) {
          //   let strs = url.split("?");
          //   link = `${strs[0]}#/caseShow/${_this.activityItem.model}/activityShow/${_this.activityItem.id}?fans_id=${_this.activityItem.fans_id}&staff_id=${_this.staff_id}&p_openid=${_this.openid}&nickname=${_this.userInfo.nickname}&avatar=${_this.userInfo.avatar}`;
          // }
          if (url.indexOf("?") > -1) {
            let strs = url.split("?");
            console.log(strs[0]);
            link = `${strs[0]}?fans_id=${_this.fans_id}&staff_id=${_this.staff_id}&p_openid=${_this.p_openid}&nickname=${_this.nickname}&avatar=${_this.avatar}`;
          } else {
            link = `${location.href}?fans_id=${_this.activityItem.fans_id}&staff_id=${_this.staff_id}&p_openid=${_this.openid}&nickname=${_this.userInfo.nickname}&avatar=${_this.userInfo.avatar}`;
          }
        }
        console.log(link);
        // alert(link)
        const dataShare = {
          title: activityItem.sharetitle,
          desc: activityItem.share_describe, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function () {
            // 设置成功
            // alert('成功')
          },
          fail: function (error) {
            // alert('失败')
          },
        };
        wx.updateAppMessageShareData(dataShare);
        wx.updateTimelineShareData(dataShare);
        wx.error(function (error) {
          // alert(JSON.stringify(error))
        });
      });
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    shareBtn(sums) {
      this.toTop();
      const _this = this;
      if (sums == 1) {
      } else {
        if (_this.val.bargaining_num == _this.total_nums) {
          return _this.$toast("你已达到该活动的砍价次数，不能继续分享");
          // _this.fans_idone = true;
        }
      }
      let params = {
        id: _this.activity_id,
      };
      _this.$request.getActivityItembase64(params).then((res) => {
        _this.copyimg = res.data;
      });
      _this.showPop = true;
      _this.$nextTick(function () {
        _this.createQrcode(sums);
      });
    },
    createPoster() {
      // 生成海报
      const vm = this;
      vm.createLoading = true;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: true,
        logging: true,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        // let url = canvas.toDataURL('image/png')
        // const a = document.createElement('a'); // 创建a标签
        // a.setAttribute('download', `${new Date().getTime()}.png`);// download属性
        // a.setAttribute('href', url);// href链接
        // a.click();// 自执行点击事件
        let url = canvas.toDataURL("image/png");
        vm.createImg = url;
        vm.showImgPop = true;
        vm.createLoading = false;
        vm.showPop = false;
      });
    },
    createQrcode(sums) {
      const _this = this;
      if (sums == 1) {
        let href = `${location.protocol}//${location.hostname}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/${
          _this.activityItem.model
        }/activityShow/${_this.activityItem.id}`;
        let canvas = document.getElementById("qrCode-canvas");
        QRCode.toCanvas(canvas, href, (error) => {
          if (error) {
            console.log(error);
          } else {
            canvas.style.width = "12rem";
            canvas.style.height = "12rem";
            // _this.createPoster()
          }
        });
      } else {
        let href = `${location.protocol}//${location.hostname}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/${
          _this.activityItem.model
        }/activityShow/${_this.activityItem.id}?fans_id=${
          _this.activityItem.fans_id
        }&staff_id=${_this.staff_id}&p_openid=${_this.openid}&nickname=${
          _this.userInfo.nickname
        }&avatar=${_this.userInfo.avatar}`;
        let canvas = document.getElementById("qrCode-canvas");
        QRCode.toCanvas(canvas, href, (error) => {
          if (error) {
            console.log(error);
          } else {
            canvas.style.width = "12rem";
            canvas.style.height = "12rem";
            // _this.createPoster()
          }
        });
      }

      // new QRCode('qrcode', {
      //   width: 120, // 设置宽度，单位像素
      //   height: 120, // 设置高度，单位像素
      //   text: href // 设置二维码内容或跳转地址
      // })
      // let canvas = document.getElementById("qrCode-canvas");
      // QRCode.toCanvas(canvas, href, (error) => {
      //   if (error) {
      //     console.log(error);
      //   } else {
      //     canvas.style.width = "12rem";
      //     canvas.style.height = "12rem";
      //     // _this.createPoster()
      //   }
      // });
    },
    // 获取该活动的订单信息
    getOrderItem() {
      const _this = this;

      let params = {
        openid: _this.openid,
        activity_id: Number(this.$route.params.id),
      };
      _this.$request.getOrderItem(params).then((res) => {
        const orderItem = res.data;
        if (orderItem.openid == this.openid) {
          _this.is_apply = true;
        }
        console.log("-----orderItem-----", orderItem.status);
        _this.$store.commit("setOrderItem", orderItem);
        // 获取订单列表，并判断是否有自己的订单
        // let orderList = res.data.val
        // console.log('-----orderList-----',orderList)
        // orderList.forEach(item=>{
        // 	if(item.openid==_this.openid){
        // 		_this.is_apply = true
        // 	}
        // })
        //      if(res.data.val&&res.data.val!=null&&res.data.val.length>0){

        //        _this.is_apply = true
        //      }
      });
    },
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        //_this.getCode(res.data.value.appid)
        _this.getCode(res.data.value.appid);
      });
    },
    getCode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setCode", code);
        _this.getOpenId(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getFansItem(item) {
      console.log("fansItem:", item);
      const _this = this;
      let params = {
        openid: item.openid || _this.openid,
        nickname: item.nickname,
        name: item.nickname,
        avatar: item.avatar,
        province: item.province,
        city: item.city,
      };
      console.log("item.openid", item.openid);
      console.log("fansItem:", item);
      _this.$request.getFansItem(params).then((res) => {
        // 默认
        // _this.getOrderItem();
      });
    },
    getOpenId(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        if (res.data[0] && res.data[0] == 1) {
          //这里需进行页面跳转，把当前链接中的code信息给过滤掉
          const url = location.href;
          window.location.href = `${url.split("?")[0]}#${url.split("#")[1]}`;
        } else {
          const userInfo = res.data[0];
          // alert('userInfo:'+JSON.stringify(userInfo))
          const openid = userInfo.openid;
          _this.openid = openid;
          const nickname = userInfo.nickname;
          const headimgurl = userInfo.headimgurl;
          const province = userInfo.province;
          const city = userInfo.city;
          // const headimgurl = userInfo["headimgurl"];
          // const headimgurl = userInfo["headimgurl"];
          // const unionid = res.data.unionid;
          _this.$store.commit("setOpenid", openid);
          localStorage.setItem("COPENID", openid);
          // alert('COPENID:'+openid)
          const item = {
            openid,
            nickname,
            avatar: headimgurl,
            province,
            city,
            name: nickname,
          };
          _this.$store.commit("setUserInfo", item);
          localStorage.setItem("USERINFO", JSON.stringify(item));
          _this.getFansItem(item);
          _this.getActivityItem();
          // _this.toCannonUrl();
        }
      });
    },
    judgeIsApply() {
      const _this = this;
      const apply_list = _this.activityItem.apply_list;
      // _this.openid = "111"
      const isApply = apply_list.some((res) => res.openid == _this.openid);
      this.activityItem.is_apply = isApply;
    },

    getInsertfans() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
        pid: this.$route.query.fans_id,
      };
      this.$request.getInsertfans(params).then((res) => {
        console.log(res);
        this.getFansItema();
      });
    },

    getItemsdda() {
      let params = {
        activity_id: Number(this.$route.params.id),
        openid: this.openid,
        pid: this.$route.query.fans_id,
      };
      this.$request.getItemsdda(params).then((res) => {
        if (res.data.ret == 400) {
          // 砍过
          return (this.iskan_status = 1);
        }
        if (res.data.ret == 200) {
          // 未砍过
          return (this.iskan_status = 2);
        }
      });
    },

    getFansitemSFKYBK() {
      let params = {
        activity_id: Number(this.$route.params.id),
        pid: this.$route.query.fans_id,
      };
      this.$request.getFansitemSFKYBK(params).then((res) => {
        if (res.data.ret == 400) {
          // 不可以继续帮砍
          return (this.is_sfky = 1);
        }
        if (res.data.ret == 200) {
          return (this.is_sfky = 2);
        }
      });
    },

    getActivityItem() {
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      localStorage.setItem("activity_id", Number(_this.$route.params.id));
      let params = {
        id: Number(_this.$route.params.id),
        openid: _this.openid,
      };
      _this.$request.getActivityItem(params).then((res) => {
        _this.activityItem = res.data;
        _this.prizes = res.data.prizes;
        // console.log(_this.activityItem, '_this.activityItem');
        _this.val = res.data.val;
        _this.endtime = res.data.end_time;
        setInterval(() => {
          this.timeDown(_this.endtime);
        }, 1000);
        _this.theme_color = res.data.theme_color;
        // localStorage.setItem('theme_color')
        _this.btn_color = res.data.btn_color;
        console.log(_this.theme_color, "_this.theme_color");
        _this.introduce = res.data.introduce;
        _this.create_form = res.data.create_form;
        document.title = _this.activityItem.title;

        if (_this.activityItem) {
          _this.getOrderItem();
          _this.shareInit(_this.activityItem); // 调用微信分享的API
          document.title = _this.activityItem.title;
          _this.getPageOrder();

          // 助力他人的界面
          if (_this.p_openid) {
            _this.getOrderSelorders1();
            _this.getFansItemss();
            _this.getInsertfans();
            _this.getItemsdda();
            _this.getFansitemSFKYBK();
            _this.getOrderSelorders();
          }
          if (!this.p_openid) {
            _this.getFansItema();
            _this.getOrderSelorders();
          }
          _this.getItemKGZF();
          _this.getPageVisit();
          // _this.getGrouorder();
          _this.getGrouorders();
          _this.getActivityFansItem();
          _this.getMerchantItem(_this.activityItem.merchant_id);
          // _this.getFansMyKJ();
          // _this.getPrizeorder();

          // _this.getPageCommissionRank();
          _this.getHelpsList();
          // _this.helpTimes(_this.activityItem);
        }
        _this.$store.commit("setActivityItem", _this.activityItem);
        toast.clear();
        _this.loadingSkeleton = false;
      });
    },
    toCaseView() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html`;
    },
    toView(to) {
      if (to == "applyTrue") {
        this.$router.push(`/caseShow/applyActivity/applyPZ`);
      } else {
        this.$router.push(`/caseShow/applyActivity/applyForm`);
      }
    },
    // 立即倒计时
    timeDown(time) {
      const endTime = new Date(time).getTime();
      const nowTime = new Date(time);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now; //截止时间减去当前时间
      if (rightTime > 0) {
        //判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.DD = dd > 9 ? dd : "0" + dd;
        this.HH = hh > 9 ? hh : "0" + hh;
        this.MM = mm > 9 ? mm : "0" + mm;
        this.SS = ss > 9 ? ss : "0" + ss;
      } else {
        this.isfail = true;
      }
    },
  },
};
</script>